<template>
    <div style="padding: 12px; box-sizing: border-box;">

        <el-dialog v-model="dialogVisible" title="奖品新增" width="500">
            <div style="height: 550px;overflow-y: scroll;">
                <el-form :inline="false" :model="formData">
                    <el-form-item label="奖品名称">
                        <el-input style="width: 300px;" v-model="formData.name" placeholder="奖品名称" clearable />
                    </el-form-item>
                    <el-form-item label="奖品金额">
                        <el-input style="width: 300px;" v-model="formData.number" placeholder="奖品金额" clearable />
                    </el-form-item>
                    <el-form-item label="奖品概率">
                        <el-input style="width: 300px;" v-model="formData.rate" placeholder="奖品概率" clearable />
                    </el-form-item>

                    <el-form-item label="奖品类型">
                        <el-input style="width: 300px;" v-model="formData.type" placeholder="奖品类型" clearable />
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button @click="onSubmit" type="primary">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <el-card style="width: 100%;">
            <template #header>
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <span>奖品列表</span>
                    <el-button @click="handleForm()" type="primary">新增</el-button>
                </div>
            </template>
            
            <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="_id" border
                default-expand-all>
                <el-table-column align="center" prop="name" label="奖品名称" />
                <el-table-column align="center" prop="number" label="奖品金额" >

                    <template #default="scope">
                       <div>￥{{ scope.row.number }}</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="rate" label="奖品概率" >
                    <template #default="scope">
                       <div>{{ scope.row.rate }}%</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="type" label="奖品类型" />
                <el-table-column align="center" label="操作">
                    <template #default="scope">
                        <el-space wrap>
                            <el-button size="small" @click="deletem(scope.row._id)" type="danger">删除</el-button>
                        </el-space>
                    </template>


                </el-table-column>
            </el-table>
            <template #footer>
                <div style="display: flex;justify-content: center;">
                    <el-pagination v-model:current-page="pagination.page" :page-size="pagination.size" background
                        layout="total, prev, pager, next" :total="pagination.total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </template>
        </el-card>

    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { resetAble } from "../../composable/reset"
import { ElMessage } from "element-plus";
import { prizeList, addPrize, delPrize } from "../../api/prize"

const tableData = ref([])

const dialogVisible = ref(false)
const pagination = ref({
    page: 1,
    size: 10,
    total: 0
})

const handleForm = async (id?: string) => {
    reset()
    if (id) {


    } else {


    }
    dialogVisible.value = true
}

const handleSizeChange = () => {

}

const handleCurrentChange = () => {

}
const { data: formData, reset } = resetAble({
    name: '',
    rate: "",
    number: "",
    type: 0,

})
const deletem = async (id: string) => {
    let res = await delPrize({ id: id })
    if (res) {
        ElMessage({
            message: '操作成功',
            grouping: true,
            type: 'success',
        })
        init()
    }
}

const onSubmit = async () => {
    let res = await addPrize(formData.value) as any
    if (res) {
        init()
        ElMessage({
            message: '操作成功',
            grouping: true,
            type: 'success',
        })
    }

    dialogVisible.value = false
}






const init = async () => {
    let res = await prizeList()
    if (res) {
        tableData.value = res.data
    }
}

init()
</script>
